<template>
    <div class="page-selected">
        <h2>{{title}}</h2>
        <div v-for="(value,index) in sea" :key="index">
      <van-card
         tag="热!"
         :desc="value.recipesPractice"
         :title="value.recipesName"
         :thumb="value.recipesImage"
          >
       <template #tags>
      <span style="margin-right:10px;">{{value.collectCount}}收藏</span>
        <span>{{value.browseCount}}次预览</span>
       </template>
       <template #footer>
         <mt-button size="small" style="margin-right:30px;" type="danger" @click="Collection(value.id)">
           <van-icon name="like-o"  v-if="value.collect"/>
           <van-icon name="like" v-else/>
           收藏</mt-button>
          <mt-button size="small" type="primary" @click="details(value.id)">
           <van-icon name="search" />
           详情</mt-button>
       </template>
       </van-card>
       </div>
    </div>
</template>

<script>
    export default {
        props:['title','sea'],
        data() {
          return {
            sc: 0,
          }
        },
        methods: {
          //详情
         details(id){
            this.$router.push(`/details/${JSON.parse(sessionStorage.getItem('user')).id}/${id}`)
          },
          //收藏
          Collection(id){
            if(this.sc == 0){
              this.sc =1
            }else if(this.sc == 1){
              this.sc = 0
            }
            let ss = this.sc
            let url = `/history/likeOrNotLike/${JSON.parse(sessionStorage.getItem('user')).id}/${id}/3/${ss}`
            this.axios.get(url).then((res) => {
              console.log(res)
            })
          }
        },
    }
</script>

<style lang="scss" scoped>

</style>